<template>
  <div class="total">
    <p>推个箱子</p>
    <img :src="backgroundImg" alt="背景" />
    <button @click="sta">开始游戏</button>

    <div class="loading" v-if="show">
      <div class="bar" :style="{ width: progress + '%' }"></div>
    </div>

    <div class="adv">
      <p>健康游戏忠告</p>
      <p><strong>抵制不良游戏，拍绝盗版游戏。</strong></p>
      <p><strong>注意自我保护，谨防受骗上当。</strong></p>
      <p><strong>适度游戏益脑，沉迷游戏伤身。</strong></p>
      <p><strong>合理安排时间，享受健康生活。</strong></p>
    </div>
  </div>
</template>

<script setup>
import {
  useRouter
} from "vue-router";
import {
  ref
} from "vue";
import backgroundImg from "@/assets/game/000.jpg";

const router = useRouter();
const show = ref(false);
const progress = ref(0);

function sta() {
  show.value = true;
  const timer = setInterval(() => {
    console.log("121");
    if (progress.value < 100) {
      progress.value += 10;
    } else {
      clearInterval(timer);
      show.value = false;
      router.push("/start");
    }
  }, 200);
}
</script>
<style scoped>
.total {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  img {
    width: 50%;
    border-radius: 10%;
    height: auto;
    margin-bottom: 1em;
  }
}
.total[data-v-63e42922] {
  p[data-v-63e42922] {
    font-size: 1em;
    font-weight: bolder;
  }
}
.adv[data-v-63e42922]{
  font-size: 0.4em
}

.loading {
  margin: 20px;
  width: 100%;
  height: 20px;
  background-color: #f4f4f4;
  position: relative;
}

.bar {
  height: 100%;
  background-color: #4caf50;
  position: absolute;
  transition: width 0.4s ease, background-color 0.4s ease;
}

.adv {
  padding: 1em;
  border-radius: 10px;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  width: 50%;

  p {
    font-size: 35px;
    line-height: 0.4;
    margin-bottom: 10px;
  }
}
button{
  font-size: 0.3em;
}
</style>
